<template>
  <div>
    <el-row>
      <el-col :span="2">
        <el-button
          type="primary"
          @click="dialogFormVisibleAdd = true"
          plain
          style="width: 90%"
          >新增</el-button
        >
      </el-col>
      <el-col :span="4">
        <el-input
          placeholder="档案号/姓名"
          type="text"
          style="width: 100%"
          v-model="name"
        />
      </el-col>
      <el-col :span="2">
        <el-button
          type="primary"
          style="width: 80%; margin-left: 16px"
          icon="el-icon-search"
          @click="page()"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="16"></el-col>
    </el-row>
    <hr />

    <!-- 分页查询 -->
    <el-table :data="list" border style="width: 100%;height=90%">
      <el-table-column prop="member.filenumber" label="档案号" width="180">
      </el-table-column>
      <el-table-column prop="member.name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="createtime" label="评估日期"> </el-table-column>
      <el-table-column prop="ocd" label="强迫症">
        <template slot-scope="scope">
          {{ scope.row.ocd == 0 ? "否" : "是" }}
        </template>
      </el-table-column>
      <el-table-column prop="anxiety" label="焦虑症">
        <template slot-scope="scope">
          {{ scope.row.anxiety == 0 ? "否" : "是" }}
        </template>
      </el-table-column>
      <el-table-column prop="terror" label="恐怖化">
        <template slot-scope="scope">
          {{ scope.row.terror == 0 ? "否" : "是" }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="loadUP(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="loaddelete(scope.$index, scope.row)"
            >删除</el-button
          >
          <el-button
            size="mini"
            type="success"
            @click="rowcha(scope.$index, scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="num"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- add -->
    <el-dialog
      title="新增评估数据"
      style="text-align: left"
      :visible.sync="dialogFormVisibleAdd"
    >
      <el-row style="text-align: center; margin-top: -20px">
        <el-col :span="2"><strong>档案号:</strong></el-col>
        <el-col :span="4"
          ><el-input
            type="text"
            v-model="clickadd.filenumber"
            style="margin-top: -6px; width: 90%"
            size="small"
        /></el-col>
        <el-col :span="2"><strong>姓名:</strong></el-col>
        <el-col :span="4"
          ><el-input
            type="text"
            v-model="clickadd.name"
            style="margin-top: -6px; width: 95%"
            size="small"
        /></el-col>
        <el-col :span="3">
          <el-popover
            placement="right"
            v-model="cha"
            width="700"
            trigger="click"
          >
            <el-table :data="addlist">
              <el-table-column
                width="150"
                property="filenumber"
                label="档案号"
              ></el-table-column>
              <el-table-column
                width="100"
                property="name"
                label="姓名"
              ></el-table-column>
              <el-table-column
                width="90"
                property="age"
                label="年龄"
              ></el-table-column>
              <el-table-column width="100" property="sex" label="性别">
                <template slot-scope="scope">
                  {{ scope.row.sex == 1 ? "男" : "女" }}
                </template>
              </el-table-column>
              <el-table-column
                width="110"
                property="phonenumber"
                label="联系方式"
              ></el-table-column>
              <el-table-column width="100" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    @click="dian(scope.$index, scope.row)"
                    plain
                    >评估</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-button
              type="success"
              style="margin-top: -6px; width: 70%"
              icon="el-icon-search"
              @click="addcha"
              size="small"
              slot="reference"
              >查询</el-button
            >
          </el-popover>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="4"
          ><strong
            >性别：{{
              clickadd.sex == "1" ? "男" : clickadd.sex == "2" ? "女" : ""
            }}</strong
          ></el-col
        >

        <el-col :span="2"></el-col>
        <el-col :span="4"
          ><strong>年龄：{{ clickadd.age }}</strong></el-col
        >
      </el-row>
      <hr />
      <el-tabs v-model="addmenu" type="border-card">
        <el-tab-pane name="1" label="心理问题">
          <el-row>
            <el-col :span="24"
              ><strong>请根据近一年的感觉，回答以下问题:</strong></el-col
            >
          </el-row>
          <br />
          <div v-for="(item, index) in bodyTest.yinxu" :key="index">
            <el-row style="margin-top: -6px; width: 90%">
              <el-col :span="10">{{ item.question }}</el-col>
              <el-col :span="14">
                <template>
                  <el-radio-group
                    v-model="item.option"
                    style="margin-top: 16px; margin-left: 20px"
                  >
                    <el-radio :label="5">没有</el-radio>
                    <el-radio :label="4">很少</el-radio>
                    <el-radio :label="3">有时</el-radio>
                    <el-radio :label="2">经常</el-radio>
                    <el-radio :label="1">总是</el-radio>
                  </el-radio-group>
                </template>
              </el-col>
            </el-row>
          </div>
          <div v-for="(item, index) in bodyTest.yangxu" :key="index">
            <el-row style="margin-top: -6px; width: 90%">
              <el-col :span="10">{{ item.question }}</el-col>
              <el-col :span="14">
                <template>
                  <el-radio-group
                    v-model="item.option"
                    style="margin-top: 16px; margin-left: 20px"
                  >
                    <el-radio :label="5">没有</el-radio>
                    <el-radio :label="4">很少</el-radio>
                    <el-radio :label="3">有时</el-radio>
                    <el-radio :label="2">经常</el-radio>
                    <el-radio :label="1">总是</el-radio>
                  </el-radio-group>
                </template>
              </el-col>
            </el-row>
          </div>
          <div v-for="(item, index) in bodyTest.qixu" :key="index">
            <el-row style="margin-top: -6px; width: 90%">
              <el-col :span="10">{{ item.question }}</el-col>
              <el-col :span="14">
                <template>
                  <el-radio-group
                    v-model="item.option"
                    style="margin-top: 16px; margin-left: 20px"
                  >
                    <el-radio :label="5">没有</el-radio>
                    <el-radio :label="4">很少</el-radio>
                    <el-radio :label="3">有时</el-radio>
                    <el-radio :label="2">经常</el-radio>
                    <el-radio :label="1">总是</el-radio>
                  </el-radio-group>
                </template>
              </el-col>
            </el-row>
          </div>
          <br />

          <el-row style="text-align: right">
            <el-col :span="18">.</el-col>
            <el-col :span="5">
              <el-button
                type="primary"
                plain
                @click="dialogFormVisibleAdd = false"
                >取消</el-button
              >
              <el-button
                style="margin-left: 20px; width: 40%"
                type="primary"
                @click="add()"
                >提交</el-button
              >
            </el-col>
            <el-col :span="1"></el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- update -->
    <el-dialog
      title="修改评估数据"
      style="text-align: left"
      :visible.sync="dialogFormVisibleUP"
    >
      <el-row style="text-align: center; margin-top: -20px">
        <el-col :span="2"><strong>档案号:</strong></el-col>
        <el-col :span="4"
          ><el-input
            type="text"
            v-model="clickup.filenumber"
            style="margin-top: -6px; width: 90%"
            size="small"
            disabled
        /></el-col>
        <el-col :span="2"><strong>姓名:</strong></el-col>
        <el-col :span="4"
          ><el-input
            type="text"
            v-model="clickup.name"
            style="margin-top: -6px; width: 95%"
            size="small"
            disabled
        /></el-col>

        <el-col :span="2"></el-col>
        <el-col :span="4"
          ><strong
            >性别：{{
              clickup.sex == "1" ? "男" : clickup.sex == "2" ? "女" : ""
            }}</strong
          ></el-col
        >
        <el-col :span="2"></el-col>
        <el-col :span="4"
          ><strong>年龄：{{ clickup.age }}</strong></el-col
        >
        <el-col :span="5"></el-col>
      </el-row>
      <hr />
      <el-tabs v-model="addmenu" type="border-card">
        <el-tab-pane name="1" label="心理测评">
          <el-row>
            <el-col :span="24"
              ><strong>请根据近一年的感觉，回答以下问题:</strong></el-col
            >
          </el-row>
          <br />
          <div v-for="(item, index) in updatelist.yinxu" :key="index">
            <el-row style="margin-top: -6px; width: 90%">
              <el-col :span="10">{{ item.question }}</el-col>
              <el-col :span="14">
                <template>
                  <el-radio-group
                    v-model="item.option"
                    style="margin-top: 16px; margin-left: 20px"
                  >
                    <el-radio :label="5">没有</el-radio>
                    <el-radio :label="4">很少</el-radio>
                    <el-radio :label="3">有时</el-radio>
                    <el-radio :label="2">经常</el-radio>
                    <el-radio :label="1">总是</el-radio>
                  </el-radio-group>
                </template>
              </el-col>
            </el-row>
          </div>
          <div v-for="(item, index) in updatelist.yangxu" :key="index">
            <el-row style="margin-top: -6px; width: 90%">
              <el-col :span="10">{{ item.question }}</el-col>
              <el-col :span="14">
                <template>
                  <el-radio-group
                    v-model="item.option"
                    style="margin-top: 16px; margin-left: 20px"
                  >
                    <el-radio :label="5">没有</el-radio>
                    <el-radio :label="4">很少</el-radio>
                    <el-radio :label="3">有时</el-radio>
                    <el-radio :label="2">经常</el-radio>
                    <el-radio :label="1">总是</el-radio>
                  </el-radio-group>
                </template>
              </el-col>
            </el-row>
          </div>
          <div v-for="(item, index) in updatelist.qixu" :key="index">
            <el-row style="margin-top: -6px; width: 90%">
              <el-col :span="10">{{ item.question }}</el-col>
              <el-col :span="14">
                <template>
                  <el-radio-group
                    v-model="item.option"
                    style="margin-top: 16px; margin-left: 20px"
                  >
                    <el-radio :label="5">没有</el-radio>
                    <el-radio :label="4">很少</el-radio>
                    <el-radio :label="3">有时</el-radio>
                    <el-radio :label="2">经常</el-radio>
                    <el-radio :label="1">总是</el-radio>
                  </el-radio-group>
                </template>
              </el-col>
            </el-row>
          </div>
          <br />

          <el-row style="text-align: right">
            <el-col :span="18">.</el-col>
            <el-col :span="5">
              <el-button
                type="primary"
                plain
                @click="dialogFormVisibleUP = false"
                >取消</el-button
              >
              <el-button
                style="margin-left: 20px; width: 40%"
                type="primary"
                @click="update()"
                >提交</el-button
              >
            </el-col>
            <el-col :span="1"></el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- cha -->
    <el-dialog
      title="查看评估数据"
      style="text-align: left"
      :visible.sync="dialogFormVisibleCha"
    >
      <el-row style="text-align: center; margin-top: -20px">
        <el-col :span="2"><strong>档案号:</strong></el-col>
        <el-col :span="4"
          ><el-input
            type="text"
            v-model="clickCha.filenumber"
            style="margin-top: -6px; width: 90%"
            size="small"
            disabled
        /></el-col>
        <el-col :span="2"><strong>姓名:</strong></el-col>
        <el-col :span="4"
          ><el-input
            type="text"
            v-model="clickCha.name"
            style="margin-top: -6px; width: 95%"
            size="small"
            disabled
        /></el-col>

        <el-col :span="2"></el-col>
        <el-col :span="4"
          ><strong
            >性别：{{
              clickCha.sex == "1" ? "男" : clickCha.sex == "2" ? "女" : ""
            }}</strong
          ></el-col
        >
        <el-col :span="2"></el-col>
        <el-col :span="4"
          ><strong>年龄：{{ clickCha.age }}</strong></el-col
        >
        <el-col :span="5"></el-col>
      </el-row>
      <hr />
      <el-tabs v-model="addmenu" type="border-card">
        <el-tab-pane name="1" label="心理测评">
          <br />
          <div v-for="(item, index) in Chalist.yinxu" :key="index">
            <el-row style="margin-top: -6px; width: 90%">
              <el-col :span="20">{{ item.question }}</el-col>
              <el-col :span="4">
                <template>
                  <span v-if="item.option==5">没有</span>
                  <span v-if="item.option==4">很少</span>
                  <span v-if="item.option==3">有时</span>
                  <span v-if="item.option==2">经常</span>
                  <span v-if="item.option==1">总是</span>                  
                </template>
              </el-col>
            </el-row>
            <hr>
          </div>
          <div v-for="(item, index) in Chalist.yangxu" :key="index">
            <el-row style="margin-top: -6px; width: 90%">
              <el-col :span="20">{{ item.question }}</el-col>
              <el-col :span="4">
                <template>
                  <span v-if="item.option==5">没有</span>
                  <span v-if="item.option==4">很少</span>
                  <span v-if="item.option==3">有时</span>
                  <span v-if="item.option==2">经常</span>
                  <span v-if="item.option==1">总是</span>
                </template>
              </el-col>
            </el-row>
            <hr>
          </div>
          <div v-for="(item, index) in Chalist.qixu" :key="index">
            <el-row style="margin-top: -6px; width: 90%">
              <el-col :span="20">{{ item.question }}</el-col>
              <el-col :span="4">
                <template>
                  <span v-if="item.option==5">没有</span>
                  <span v-if="item.option==4">很少</span>
                  <span v-if="item.option==3">有时</span>
                  <span v-if="item.option==2">经常</span>
                  <span v-if="item.option==1">总是</span>
                </template>
              </el-col>
            </el-row>
            <hr>
          </div>
        </el-tab-pane>      
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 分页查询
      num: 1,
      size: 10,
      total: 2,
      list: [],
      name: "",

      // 新增心理评估数据
      dialogFormVisibleAdd: false,
      cha: false,
      addlist: [],
      // 页面默认数据
      addmenu: "1",
      bodyTest: {
        yangxu: [
          {
            type: "1",
            question: " 11. 担心自己的服饰整齐及仪态端正？",
            option: "",
          },
          { type: "1", question: " 12. 头脑中有不必要的想法？", option: "" },
          { type: "1", question: " 13. 神经过敏，心中不踏实？", option: "" },
          {
            type: "1",
            question: " 14. 感到自己的精力下降，活动减慢？",
            option: "",
          },
          { type: "1", question: " 15. 感到大多数人不可信任？", option: "" },
        ],
        yinxu: [
          { type: "2", question: " 1. 头痛 ？", option: "" },
          { type: "2", question: " 2. 头晕和昏倒 ？", option: "" },
          { type: "2", question: " 3. 对异性兴趣减退 ？", option: "" },
          { type: "2", question: " 4. 忘记性大 ？", option: "" },
          { type: "2", question: " 5. 责怪别人制造麻烦 ？", option: "" },
          { type: "2", question: " 6. 容易烦躁和激动 ？", option: "" },
          { type: "2", question: " 7. 胸闷，胸痛 ？", option: "" },
          { type: "2", question: " 8. 心悸、出汗、发抖 ？", option: "" },
          { type: "2", question: " 9. 胃口不好 ？", option: "" },
        ],
        qixu: [
          { type: "3", question: " 16. 听到旁人听不到的声音 ？", option: "" },
          { type: "3", question: " 17. 感到别人能控制你的想法 ？", option: "" },
          { type: "3", question: " 18. 想结束自己的生命 ？", option: "" },
          { type: "3", question: " 19. 害怕空旷的场所或街道 ？", option: "" },
        ],
      },
      clickadd: { id: -1, filenumber: "", name: "" },

      // 修改心理评估数据
      dialogFormVisibleUP: false,

      bodytypeUP: {},
      clickup: {},
      updatelist: { yangxu: [], yinxu: [], qixu: [] },

      // 查看心理评估数据
      dialogFormVisibleCha: false,

      bodytypeCha:{},
      clickCha: {},
      Chalist: {yangxu:[],yinxu:[],qixu:[]},
    };
  },
  methods: {
    // 新增数据
    addcha() {
      this.clickadd = { id: -1, filenumber: "", name: "" };
      this.axios.post("/rear/Bodytype/cha", this.clickadd).then((res) => {
        this.addlist = res.data;
      });
    },
    dian(index, row) {
      this.clickadd = row;
      this.cha = false;
    },
    add() {
      if (this.clickadd.id == -1) {
        this.$message({
          message: "警告! 您没有选中患者，请选择患者 ！",
          type: "warning",
        });
        return;
      }
      let max = 0;
      let num = 0;
      this.bodyTest.yangxu.forEach((element) => {
        if (element.option != "") {
          num += 1;
        }
        max += 1;
      });
      if (max != num) {
        this.$message({
          message: "警告!心理测评没有填写完整 ！",
          type: "warning",
        });
        return;
      } else {
        max = 0;
        num = 0;
      }
      this.bodyTest.yinxu.forEach((element) => {
        if (element.option != "") {
          num += 1;
        }
        max += 1;
      });
      if (max != num) {
        this.$message({
          message: "警告! 心理测评没有填写完整 ！",
          type: "warning",
        });
        return;
      } else {
        max = 0;
        num = 0;
      }
      this.bodyTest.qixu.forEach((element) => {
        if (element.option != "") {
          num += 1;
        }
        max += 1;
      });
      if (max != num) {
        this.$message({
          message: "警告! 心理测评没有填写完整 ！",
          type: "warning",
        });
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "正在拼命提交中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let params = {
        yangxus: JSON.stringify(this.bodyTest.yangxu),
        yinxus: JSON.stringify(this.bodyTest.yinxu),
        qixus: JSON.stringify(this.bodyTest.qixu),
        member: JSON.stringify(this.clickadd),
      };
      this.axios
        .post("/rear/Mentalityresult/add", params)
        .then((res) => {
          if (res.data) {
            this.$message({
              message: "提交成功！",
              type: "success",
            });
          }
          this.dialogFormVisibleAdd = false;
          loading.close();
          this.page();
        })
        .catch((res) => {
          this.$message.error("服务器出现问题，请联系管理员！");
          this.dialogFormVisibleAdd = false;
          loading.close();
        });
    },
    // 修改数据
    loadUP(index, row) {
      this.bodytypeUP = row;
      this.clickup = row.member;
      this.dialogFormVisibleUP = true;

      this.axios
        .get("/rear/Mentalitytest/list", { params: { id: row.id, type: 1 } })
        .then((res) => {
          if (res.data) {
            this.updatelist.yangxu = res.data;
          }
        })
        .catch((res) => {
          this.$message.error("服务器出现问题，请联系管理员！");
        });
      this.axios
        .get("/rear/Mentalitytest/list", { params: { id: row.id, type: 2 } })
        .then((res) => {
          if (res.data) {
            this.updatelist.yinxu = res.data;
          }
        })
        .catch((res) => {
          this.$message.error("服务器出现问题，请联系管理员！");
        });
      this.axios
        .get("/rear/Mentalitytest/list", { params: { id: row.id, type: 3 } })
        .then((res) => {
          if (res.data) {
            this.updatelist.qixu = res.data;
          }
        })
        .catch((res) => {
          this.$message.error("服务器出现问题，请联系管理员！");
        });
    },
    update() {
      let max = 0;
      let num = 0;
      this.updatelist.yangxu.forEach((element) => {
        if (element.options != "") {
          num += 1;
        }
        max += 1;
      });
      if (max != num) {
        this.$message({
          message: "警告! 心理测评没有填写完整 ！",
          type: "warning",
        });
        return;
      } else {
        max = 0;
        num = 0;
      }
      this.updatelist.yinxu.forEach((element) => {
        if (element.options != "") {
          num += 1;
        }
        max += 1;
      });
      if (max != num) {
        this.$message({
          message: "警告! 心理测评没有填写完整 ！",
          type: "warning",
        });
        return;
      } else {
        max = 0;
        num = 0;
      }
      this.updatelist.qixu.forEach((element) => {
        if (element.options != "") {
          num += 1;
        }
        max += 1;
      });
      if (max != num) {
        this.$message({
          message: "警告! 心理测评没有填写完整 ！",
          type: "warning",
        });
        return;
      }
      const loading = this.$loading({
        lock: true,
        text: "正在拼命提交中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let params = {
        yangxus: JSON.stringify(this.updatelist.yangxu),
        yinxus: JSON.stringify(this.updatelist.yinxu),
        qixus: JSON.stringify(this.updatelist.qixu),
        member: JSON.stringify(this.bodytypeUP),
      };
      this.axios
        .post("/rear/Mentalityresult/update", params)
        .then((res) => {
          if (res.data) {
            this.$message({
              message: "提交成功！",
              type: "success",
            });
          }
          this.dialogFormVisibleUP = false;
          loading.close();
          this.page();
        })
        .catch((res) => {
          this.$message.error("服务器出现问题，请联系管理员！");
          this.dialogFormVisibleUP = false;
          loading.close();
        });
    },
    // 删除数据
    loaddelete(index, row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .get("/rear/Mentalityresult/delete", { params: { id: row.id } })
            .then((res) => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.page();
            })
            .catch((res) => {
              this.$message.error("服务器出现问题，请联系管理员！");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 分页查询
    handleSizeChange(val) {
      this.size = val;
      this.page();
    },
    handleCurrentChange(val) {
      this.num = val;
      this.page();
    },
    page() {
      const loading = this.$loading({
        lock: true,
        text: "正在加载数据中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.axios
        .get("/rear/Mentalityresult/page", {
          params: { num: this.num, size: this.size, name: this.name.trim() },
        })
        .then((res) => {
          this.list = res.data.list;
          this.total = res.data.total;
          loading.close();
        })
        .catch((res) => {
          this.$message.error("服务器出现问题，请联系管理员！");
          loading.close();
        });
    },

    // 查看
    rowcha(index,row){
      this.bodytypeCha=row;
      this.clickCha = row.member;
      this.dialogFormVisibleCha = true;

      this.axios.get("/rear/Mentalitytest/list",{params:{id:row.id,type:1}}).then(res =>{
        if(res.data){
          this.Chalist.yangxu=res.data;
        }
      }).catch(res =>{
        this.$message.error("服务器出现问题，请联系管理员！");
      })
      this.axios.get("/rear/Mentalitytest/list",{params:{id:row.id,type:2}}).then(res =>{
        if(res.data){
          this.Chalist.yinxu=res.data;
        }
      }).catch(res =>{
        this.$message.error("服务器出现问题，请联系管理员！");
      })
      this.axios.get("/rear/Mentalitytest/list",{params:{id:row.id,type:3}}).then(res =>{
        if(res.data){
          this.Chalist.qixu=res.data;
        }
      }).catch(res =>{
        this.$message.error("服务器出现问题，请联系管理员！");
      });
    }
  },
  created() {
    this.page();
  },
};
</script>

<style scoped>
</style>